<template>
<div>
	<Form :ref=formRef :model=model :rules=rules :label-width="100" style="max-width:400px;">
		<FormItem prop="head">
        	<picture-single v-model="model" prop="head" :height=100 :width=100></picture-single>
		</FormItem>
		<FormItem label="角色" prop="roleName">
			<Input v-model="model.roleName" disabled />
		</FormItem>
		<FormItem label="用户名" prop="userName">
			<Input v-model="model.userName" disabled />
			<p gray3>作为账户登录使用</p>
		</FormItem>
		<FormItem label="职务" prop="post">
			<Input v-model="model.post" />
		</FormItem>
		<FormItem label="姓名" prop="name">
			<Input v-model="model.name" />
		</FormItem>
		<FormItem label="性别" prop="sex">
			<RadioGroup v-model="model.sex">
				<Radio label="男"></Radio>
				<Radio label="女"></Radio>
			</RadioGroup>
		</FormItem>
		<FormItem label="手机" prop="phoneNumber">
			<Input v-model="model.phoneNumber" />
		</FormItem>
		<FormItem label="邮箱" prop="emailAddress">
			<Input v-model="model.emailAddress" />
		</FormItem>
		<FormItem label="备注" prop="remark">
			<Input v-model="model.remark" type="textarea" :rows=3 />
		</FormItem>
		<FormItem>
			<Button type="primary" @click="handleSave" :disabled=!showPage>保存</Button>
		</FormItem>
	</Form>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase'
import util from '../../../lib/util'
import PictureSingle from '@common/components/picture-single.vue'

@Component({
    components: {
        PictureSingle
    }
})
export default class PersonalProfile extends AbpBase{
	model:any = {}
	formRef:string = this.getRandomRef('form');
	get rules() {
		return {
			emailAddress: [
				{ type: 'email', message: '邮箱格式不正确' }
			]
		};
	}
	handleSave() {
		this.validate(this.formRef, async () => {
			var response = await this.put('Admin/UpdatePersonalProfile', this.model);
			if(response.success) {
				this.success('修改成功');
				this.$store.dispatch('website/getSelf');
			}
		});
	}
	async handleGetPersonalProfile() {
		this.showPage = false;
		await this.$store.dispatch('website/getSelf');
		this.model = Object.assign({}, this.$store.state.website.self);
		this.showPage = true;
	}
	async created() {
		await this.handleGetPersonalProfile();
	}
}
</script>
